<template>
  <div class="container">
    <div class="top">
      <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
      <el-button type="primary" @click="sure">提交</el-button>
    </div>
    <div class="box">
      <div class="top1">新建中央动态</div>
    </div>
    <div class="banner">
      <div class="left">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!--标题-->
          <div class="biaoti">
            <el-form-item label="标题：" prop="title">
              <el-input
                v-model="ruleForm.title"
                placeholder="请输入标题"
                type="text"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <span class="addFirst" @click="addList">添加</span>
          </div>

          <!--分类-->
          <div class="fenlei" v-for="(item,index) in fList" :key="index">
            <el-form-item label="分类：" prop="type">
              <el-select v-model="item.type" placeholder="请选择分类">
                <el-option
                  v-for="item in list"
                  :key="item.index"
                  :label="item.itemName"
                  :value="item.itemValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--本地图片选择-->
            <div class="pic-box">
              <h1 class="h1-1">选择图片：</h1>
              <!--图片上传开始-->
              <div class="upload-box">
                <el-upload
                  class="sssss"
                  action
                  list-type="picture-card"
                  :file-list="fileList[index]"
                  :auto-upload="false"
                  :before-upload="beforeAvatarUpload"
                  :on-change="function(file,fileList){return handleChange(file,fileList,index)}"
                  ref="uploadFile"
                  accept=".png, .jpg, .jpeg"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file,index)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
              <!--图片上传结束-->
              <!--<Upload></Upload>-->
            </div>
            <!--图片提示文字及边框-->
            <div class="flex-box">
              <div class="pic-Tips">
                <h1>1.请上传PNG、JPG或者JPEG图片，大小不超过10MB; ;</h1>
                <h1>2.图片尺寸约为1200*120px；</h1>
              </div>
            </div>
            <!--链接-->
            <span class="xing">*</span>
            <el-form-item label="链接：" prop="url">
              <el-input v-model="item.url" placeholder="请输入链接"></el-input>
            </el-form-item>
            <div class="right">
              <div class="up" @click="upClick(index)" v-if="index !== 0">
                <img src="@/assets/image/shang.png" alt />
              </div>
              <div class="up" @click="downClick(index)" v-if="index !== fList.length - 1">
                <img src="@/assets/image/xia.png" alt />
              </div>
              <div class="up" @click="deleteone(index)">
                <img src="@/assets/image/delete.png" alt />
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  components: { Upload },
  data() {
    return {
      fileList: [[]],
      dialogImageUrl: "",
      dialogVisible: false,
      //控制按钮是否课件
      disabled: false,
      //文本框
      textarea200: "",
      // 分类列表
      list: [],
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        type: "",
        pic: "",
      },
      type: "",
      pic: "",
      url: "",
      fList: [
        {
          type: "",
          pic: "",
          url: "",
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // type: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
        // url: [{ required: true, message: "请输入链接", trigger: "blur" }],
      },
    };
  },
  created() {
    this.Api.getClassify({
      typeCode: "ZYDT_SORT_LEVREL1",
    }).then((res) => {
      this.list = res.data;

      // console.log(this.list);
    });
  },
  computed: {
    //图片获取根路径
    baseUrl() {
      return this.$store.state.PortalManagement.fileIp;
    },
  },
  methods: {
    // 上移
    upClick(index) {
      let newArr = this.swapItems(this.fList, index, index - 1);
      this.fList = newArr;
    },
    // 下移
    downClick(index) {
      let newArr = this.swapItems(this.fList, index, index + 1);
      this.fList = newArr;
    },
    swapItems(fList, index1, index2) {
      fList[index1] = fList.splice(index2, 1, fList[index1])[0];
      return fList;
    },
    deleteone(index) {
      this.fList.splice(index, 1);
    },
    back() {
      this.$router.go(-1);
    },
    addList() {
      this.fList.push({
        type: "",
        pic: "",
        url: "",
      });
    },
    // 提交
    sure() {
      console.log(this.ruleForm.title, "1111111111111111");
      console.log(this.fList, "222222222222222222222");
      if (!this.ruleForm.title) {
        this.$message.error("请输入标题");
        return;
      }
      if (this.fList.length == 0) {
        this.$message.error("请添加内容");
        return;
      }
      let result = this.fList.map((item) => {
        if (!item.type) {
          this.$message.error("请选择分类");
          return false;
        }
        if (!item.pic) {
          this.$message.error("请选择图片");
          return false;
        }
        if (!item.url) {
          this.$message.error("请输入链接");
          return false;
        }
        // 链接校验
      });
      if (result.includes(false)) {
        return;
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.newCenter({
            id: "",
            title: this.ruleForm.title,
            exList: this.fList,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("新建成功");
              this.$router.go(-1);
              this.$refs["ruleForm"].resetFields();
              this.get();
              location.reload();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    //图片上传的方法
    handleChange(file, fileList, index) {
      const formData = new FormData();
      //在file里面追加一个对象
      formData.append("file", file.raw);
      // console.log(formData,111)
      this.Api.uploadImage(formData)
        .then((res) => {
          console.log(res, "图片上传");
          this.fileList[index] = [
            { url: this.$store.state.PortalManagement.fileIp + res.data.url },
          ];
          console.log(this.fileList);
          this.fList[index].pic = this.fileList[index][0].url;
          var data = {
            ...this.ruleForm,
            picUrl: res.data.url,
            pic: res.data.url,
          };
          // console.log(res, 111);
          this.$emit("update:ruleForm", data);
        })
        .catch((res) => {
          // console.log(res, "失败")
          this.fileList = [];
        });
    },
    handleRemove(file, index) {
      this.$set(this.fileList, index, []);

      // console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传限定图片类型
    beforeAvatarUpload(file) {
      // console.log("tupian上传大小限制")
      // const isJPG = file.type === "png/jpeg/jpg";
      const isLt2M = file.size / 1200 / 1024 < 10;

      // if (!isJPG) {
      //     this.$message.error("上传图片只能是png/jpeg/jpg格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小需小于10MB");
      }
      return isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width:460px;
}
.xing {
  color: red;
  position: absolute;
  left: 358px;
  top: 588px;
}
.up {
  margin-bottom: 10px;
  margin-right: 20px;
}
/deep/.bt-group {
  display: flex;
  align-items: flex-end;
  position: relative;
  .el-button--preview {
    width: 70px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: #3d7fff;
    padding: 0;
    margin-left: 10px;
    position: absolute;
    bottom: 165px;
  }
}
.container {
  padding: 0px 0px;
}
.top {
  width: 100%;
  height: 76px;
  line-height: 76px;
  background: rgba(240, 242, 245, 1);
  margin-top: -18px;
  color: #333333;
  font-size: 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-button {
  width: 70px;
  height: 36px;
  padding: 0;
}
.top1 {
  height: 60px;
  color: #333333;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  margin: 0 20px;
}
.banner {
  padding: 26px 0;
  margin: 0 20px;
}
.right {
  margin-left: 400px;
  display: flex;
  // margin-top: -80px;
}
.fenlei {
  width: 640px;
  height: 350px;
  background: #f8f8f9;
  padding-top: 10px;
  margin-top: 10px;
}
/deep/.el-input__inner {
  width: 460px;
  height: 36px;
}

.biaoti {
  display: flex;
}
.addFirst {
  width: 70px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: white;
  color: #3d7fff;
  border-radius: 4px;
  margin-top: 2px;
  border: 1px solid #3d7fff;
  margin-left: 10px;
}

/deep/.el-button--NewlyBuild {
  width: 80px;
  height: 36px;
  background: rgba(61, 127, 255, 1);
  border-radius: 3px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 42px;
      .el-form {
        .el-form-item {
          margin: 0 0 16px 0;
          .el-form-item__label {
            width: 85px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          .el-form-item__content {
            margin-left: 85px !important;
            .el-input__inner {
              width: 260px;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
          .h1-1::before {
            content: "* ";
            color: #ff0000;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
.pic-box {
  display: flex;
  padding-bottom: 10px;
}
.h1-1 {
  width: 85px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  text-align: right;
  margin-left: 4px;
  margin-right: 10px;
}
.h1-1::before {
  content: "* ";
  color: #ff0000;
}
.flex-box {
  display: flex;
  justify-content: flex-start;
}
.pic-Tips {
  width: 360px;
  padding-top: 6px;
  padding-bottom: 15px;
  border-top: 1px solid #dddddd;
  margin-left: 100px;
}
h1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 22px;
}
/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
}
/deep/.el-icon-zoom-in {
  font-size: 19px;
}
/deep/.el-icon-download {
  font-size: 19px;
}
/deep/.el-icon-delete {
  font-size: 19px;
}
.upload-box {
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul {
    li {
      div {
        > span {
          display: flex;
        }
      }
    }
  }
}
</style>